<template>
	<view class="container">
		<!-- 顶部选项卡 -->
		<view class="roof_tab">
			<view class="le_title">
				<image src="/static/image/operation_icon.png"></image>
				<view>运营后台</view>
			</view>
			<view class="ri_tab">
				<view v-for="(item,index) in pitchTab" :key="index" class="Item" :class="{'active':item.status}"
					@click="headleDamin(index)">{{item.name}}</view>
			</view>
		</view>
		<!-- 占位 -->
		<view class="placeholder"></view>
		<!-- 用户管理 -->
		<view v-if="pitchTab[0].status" class="user_container">
			<!-- 头部选项卡 -->
			<view class="header_tab">
				<view v-for="(item,index) in headerTab" :key="index" class="Item" :class="{'active' : item.status}"
					@click="headleSwitch(index)">{{item.name}}</view>
			</view>
			<!-- 机器用户/全部用户 -->
			<view class="content_box">
				<!-- 机器用户-->
				<view v-if="headerTab[0].status">
					<view class="robot_list">
						<view class="head_title" @click="headleAddUser">添加用户</view>
						<view class="robot_con">
							<!-- 内容 -->
							<view class="Item" v-for="item in MachineList" :key="item.id">
								<image :src="item.avatarUrl"></image>
								<view class="item1">
									<view class="name">{{item.nickName}}</view>
									<view class="status_box">
										<view>动态 {{item.dynamic_count}} </view>
										<view>关注 {{item.follow_count}}</view>
										<view>粉丝 {{item.fans_count}}</view>
									</view>
								</view>
								<view class="compile" @click="headleNav(item.id)">编辑</view>
							</view>
						</view>

					</view>
				</view>
				<!-- 全部用户 -->
				<view v-if="headerTab[1].status">
					<view class="alluser_list">
						<view class="head_box">
							<view class="head_title">共 {{allUserCount}} 位用户</view>
							<view class="headuser_tab">
								<view v-for="(item,index) in allUerTab" :key="index" :class="{'active' : item.status}"
									@click="headleSwitchUser(index)">{{item.name}}</view>
							</view>
						</view>
						<!-- 内容 -->
						<view class="user_con">
							<view class="Item" v-for="(item,index) in allUserList" :key="index">
								<image :src="item.avatarUrl"></image>
								<view class="item1">
									<view class="name">{{item.nickName}}</view>
									<view class="status_box">
										<view>动态 {{item.dynamic_count}}</view>
										<view>关注 {{item.follow_count}}</view>
										<view>粉丝 {{item.fans_count}}</view>
									</view>
								</view>
								<view class="date">{{item.last_login}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 动态管理 -->
		<view v-if="pitchTab[1].status" class="dynamic_container">
			<view class="dynamic_content">
				<!-- 头部选项卡 -->
				<view class="con_header_tab">
					<view class="btn_tab">
						<view v-for="(item,index) in userTab" :key="index" :class="{'active':item.status}"
							@click="headleUserTab(index)">{{item.name}}</view>
					</view>
					<view class="new_user" @click="headleNewDynamic">新建</view>
				</view>
				<!-- 全部可见 -->
				<view v-if="userTab[0].status">
					<view class="visible">
						<view class="num">共 {{AllCount}} 条</view>
						<view class="visible_tab">
							<view v-for="(item,index) in pressTab" :key="index" :class="{'active' : item.status}"
								@click="headlePressTab(index)">{{item.name}}</view>
						</view>
					</view>
					<!-- 动态内容区域 -->
					<view class="content_box">
						<view class="box" v-for="(item,index) in AlldynamicList" :key="index">
							<view class="box_one">
								<image class="headImg" :src="item.user.avatarUrl"></image>
								<view class="user">
									<view class="name">{{item.user.nickName}}</view>
									<view class="time">{{item.createTime}}</view>
								</view>
								<view class="userstatus" @click="headleConceal(item.id,index)">
									<image src="/static/image/yincan.png"></image>
									<view>隐藏</view>
								</view>
							</view>
							<view class="img_content">
								<view class="box_twoImg"
									:class="{'one':item.img_list.length===1,'two':item.img_list.length>1 && item.img_list.length<=4,'the':item.img_list.length>=5}">
									<image :src="item1" v-for="(item1,index) in item.img_list" :key="index"></image>
								</view>
							</view>
							<view class="box_threecon">
								{{item.content}}
							</view>
							<view class="box_four">
								<view class="place" v-if="item.place!==''">
									<image src="/static/image/dingwei.png"></image>{{item.place}}
								</view>
								<view class="tag_box">
									<view class="tag">
										<view v-for="(item1,index) in item.tag_list" :key="index">{{item1.name}}</view>
									</view>
								</view>
							</view>
							<view class="box_five">
								<view class="item">
									<image src="/static/image/zhuanfa.png"></image>
								</view>
								<view class="item">
									<image src="/static/image/pinglun.png"></image>
									<view>{{item.comments_count}}</view>
								</view>
								<view class="item">
									<image src="/static/image/dainzan.png"></image>
									<view>{{item.likes_count}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<!--隐藏动态 -->
				<view v-if="userTab[1].status">
					<view class="num_box">
						<view class="num">共 {{concealCount}} 条</view>
					</view>
					<!-- 动态内容区域 -->
					<view class="content_box">
						<view class="box" v-for="(item,index) in concealList" :key="item.id">
							<view class="box_one">
								<image class="headImg" :src="item.user.avatarUrl"></image>
								<view class="user">
									<view class="name">{{item.user.nickName}}</view>
									<view class="time">{{item.createTime}}</view>
								</view>
								<view class="userstatus recover" @click="headleRecover(item.id,index)">
									<image src="/static/image/xianshi.png"></image>
									<view>恢复</view>
								</view>
							</view>
							<view class="img_content">
								<view class="box_twoImg"
									:class="{'one':item.img_list.length===1,'two':item.img_list.length>1&& item.img_list.length<=4,'the':item.img_list.length>=5}">
									<image :src="item1" v-for="(item1,index) in item.img_list" :key="index"></image>
								</view>
							</view>
							<view class="box_threecon">
								{{item.content}}
							</view>
							<view class="box_four">
								<view class="place" v-if="item.place!==''">
									<image src="/static/image/dingwei.png"></image>{{item.place}}
								</view>
								<view class="tag">
									<view v-for="(item,index) in item.tag_list" :key="item.id">{{item.name}}</view>
								</view>
							</view>
							<view class="box_five">
								<view class="item">
									<image src="/static/image/zhuanfa.png"></image>
								</view>
								<view class="item">
									<image src="/static/image/pinglun.png"></image>
									<view>{{item.comments_count}}</view>
								</view>
								<view class="item">
									<image src="/static/image/dainzan.png"></image>
									<view>{{item.likes_count}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pitchTab: [{
						name: "用户管理",
						status: true,
						id: 0
					},
					{
						name: "动态管理",
						status: false,
						id: 1
					}
				], //控制顶部选项卡事件
				//头部选项卡列表
				headerTab: [{
						name: "机器用户",
						status: true,
						id: 0
					},
					{
						name: "全部用户",
						status: false,
						id: 1
					}
				],
				// 全部用户/按最近活跃/按发布最多列表
				allUerTab: [{
						name: "按最近活跃",
						status: true,
						id: 0
					},

					{
						name: "按发布最多",
						status: false,
						id: 1
					}
				],
				//动态列表头部选项卡
				userTab: [{
						name: "全部可见",
						status: true,
						id: 0
					},
					{
						name: "隐藏动态",
						status: false,
						id: 1
					},
				],
				pressTab: [{
						name: "按最新",
						status: true,
						id: 0
					},
					{
						name: "按最热",
						status: false,
						id: 1
					},
				],

				SwitchBle: true, //动态管理全部可见控制最新最热事件
				MachineList: [], // 机器人列表数据 //用户管理
				machineNextPage: null, //判断机器列表是否有下一页数据
				machineNum: 1, //当前机器列表页码值
				allUserList: [], //全部用户列表数据 //用户管理
				allUserCount: 0, //全部用户 数量 //用户管理
				pageNum: 1, //全部用户列表页码值 //用户管理
				userNum: 0, //判断当前是最近或最多
				nextPage: null, //判断当前全部用户列表是否有下一页数据 //用户管理		
				AllCount: 0,
				AlldynamicList: [], //全部可见列表数据 //动态管理
				dynamicPageNum: 1, //全部可见列表页码值 //动态管理
				dynamicNextPage: null, //判断当前全部可见列表是否有下一页数据 //动态管理
				dynamicNum: 0, //判断当前是最新或最热 //动态管理 全部可见
				concealCount: 0,
				concealList: [], //隐藏动态列表数据  //动态管理
				concealPageNum: 1, //隐藏动态列表页码值 //动态管理
				concealNextPage: null //判断当前隐藏动态是否有下一页数据 //动态管理

			}
		},
		onLoad() {

		},
		methods: {
			// 用户管理 /动态管理切换回调
			headleDamin(index) {
				this.pitchTab.map((item, i) => i === index ? item.status = true : item.status = false)
				if (index === 0) {
					this.getMachineList()
				} else {
					this.getAlldynamicList()
				}
			},

			// 机器用户/全部用户切换回调 /用户管理
			headleSwitch(index) {
				this.headerTab.map((item, i) => {
					i === index ? item.status = true : item.status = false
				})
				this.pageNum = 1
				this.machineNum = 1
				if (index === 0) {
					this.getMachineList() // 获取机器列表数据 
				} else {
					this.getAllUserList()
				}

			},
			// 全部用户/按最近活跃/按发布最多回调 /用户管理 
			headleSwitchUser(index) {
				this.allUerTab.map((item, i) => {
					i === index ? item.status = true : item.status = false
				})
				this.pageNum = 1
				if (index === 0) {
					this.userNum = 0
					this.getAllUserList()
				} else {
					this.userNum = 1
					this.getAllUserList()
				}


			},

			//跳转到添加用户页 /用户管理
			headleAddUser() {
				uni.navigateTo({
					url: '../adduser/adduser'
				})
			},

			//动态管理 /全部/隐藏
			headleUserTab(index) {
				this.userTab.map((item, i) => i === index ? item.status = true : item.status = false)
				this.dynamicPageNum = 1
				this.concealPageNum = 1
				if (index === 0) {
					this.getAlldynamicList()
				} else {
					this.getConcealList()
				}
			},
			//动态管理 /最新最热 
			headlePressTab(index) {
				this.pressTab.map((item, i) => i === index ? item.status = true : item.status = false)
				this.dynamicPageNum = 1
				if (index === 0) {
					this.dynamicNum = 0
					this.getAlldynamicList()
				} else {
					this.dynamicNum = 1
					this.getAlldynamicList()
				}
			},
			// 动态管理/跳转到新建用户
			headleNewDynamic() {
				uni.navigateTo({
					url: '../release/release'
				})
			},

			// 获取机器列表数据 /用户管理
			getMachineList() {
				let that = this
				uni.showLoading({
					title: "加载中..."
				})
				that.myRequesy({
					url: 'admin/machines',
					data: {
						page: that.machineNum
					}
				}).then(res => {
					if (res.data.code === 0) {
						uni.hideLoading()
						that.MachineList = res.data.data
						that.machineNextPage = res.data.next_url
					}
				})
			},

			getMachineNextList() {
				let that = this
				if (that.machineNextPage !== null) {
					that.machineNum += 1
					uni.showLoading({
						title: "加载中"
					})
					that.myRequesy({
						url: 'admin/machines',
						data: {
							page: that.machineNum
						}
					}).then(res => {
						if (res.data.code === 0) {
							uni.hideLoading()
							that.MachineList = [...that.MachineList, ...res.data.data]
							that.machineNextPage = res.data.next_url
						}
					})
				}
			},

			// 获取全部用户数据列表 /用户管理
			getAllUserList() {
				uni.showLoading({
					title: "加载中"
				})
				this.myRequesy({
					url: 'admin/users',
					data: {
						page: this.pageNum,
						order_by: this.userNum === 0 ? 'last_login' : 'dynamic_count'
					}
				}).then(res => {
					if (res.data.code === 0) {
						uni.hideLoading()
						this.allUserList = res.data.data,
							this.allUserCount = res.data.count
						this.nextPage = res.data.next_url
					}
				})
			},
			// 获取全部用户下一页数据列表 /用户管理
			getAllUserNextList() {
				if (this.nextPage !== null) {
					this.pageNum += 1
					uni.showLoading({
						title: "加载中"
					})
					this.myRequesy({
						url: 'admin/users',
						data: {
							page: this.pageNum,
							order_by: this.userNum === 0 ? 'last_login' : 'dynamic_count'
						}
					}).then(res => {
						if (res.data.code === 0) {
							uni.hideLoading()
							this.allUserList = [...this.allUserList, ...res.data.data],
								this.allUserCount = res.data.count
							this.nextPage = res.data.next_url
						}
					})
					return
				}
			},

			//获取全部可见数据列表 动态管理
			getAlldynamicList() {
				uni.showLoading({
					title: "加载中"
				})
				this.myRequesy({
					url: 'admin/dynamics',
					data: {
						page: this.dynamicPageNum,
						order_by: this.dynamicNum === 0 ? 'createTime' : 'all_count'
					}
				}).then(res => {
					if (res.data.code === 0) {
						uni.hideLoading()
						this.AlldynamicList = res.data.data,
							this.AllCount = res.data.count
						this.dynamicNextPage = res.data.next_url
					}
				})
			},

			// 获取全部可见下一页数据列表 /动态管理
			getAlldynamicNextList() {
				uni.showLoading({
					title: "加载中"
				})
				if (this.dynamicNextPage !== null && this.userTab[0].status == true) {
					this.dynamicPageNum += 1
					this.myRequesy({
						url: 'admin/dynamics',
						data: {
							page: this.dynamicPageNum,
							order_by: this.dynamicNum === 0 ? 'createTime' : 'all_count'
						}
					}).then(res => {
						if (res.data.code === 0) {
							uni.hideLoading()
							this.AlldynamicList = [...this.AlldynamicList, ...res.data.data],
								this.AllCount = res.data.count
							this.dynamicNextPage = res.data.next_url
						}
					})
					return
				}
			},

			// 获取隐藏动态数据列表 //动态管理
			getConcealList() {
				let that = this
				this.myRequesy({
					url: 'admin/no-show-dynamics',
					page: this.concealPageNum
				}).then(res => {
					if (res.data.code === 0) {
						that.concealList = res.data.data,
							that.concealCount = res.data.count
						that.concealNextPage = res.data.next_url
					}
				})
			},

			// 获取隐藏动态下一页数据列表 /动态管理
			getConcealNextList() {
				if (this.concealNextPage !== null && this.userTab[1].status == true) {
					this.concealPageNum += 1
					this.myRequesy({
						url: 'admin/no-show-dynamics',
						data: {
							page: this.concealPageNum,
						}
					}).then(res => {
						if (res.data.code === 0) {
							this.concealList = [...this.concealList, ...res.data.data],
								this.concealCount = res.data.count
							this.concealNextPage = res.data.next_url
						}
					})
					return
				}
			},

			// 点击隐藏动态
			headleConceal(id, index) {
				let that = this
				this.myRequesy({
					url: 'admin/dynamic/to-no-show',
					method: 'POST',
					data: {
						dynamic_id: id
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.AlldynamicList.splice(index, 1)
						this.AllCount--
					}
				})
			},

			//点击恢复动态
			headleRecover(id, index) {
				let that = this
				this.myRequesy({
					url: 'admin/dynamic/to-show',
					method: 'POST',
					data: {
						dynamic_id: id
					}
				}).then(res => {
					if (res.data.code === 0) {
						this.concealList.splice(index, 1)
						this.concealCount--
					}
				})
			},


			// 机器人用户编辑
			headleNav(id) {
				uni.navigateTo({
					url: '../adduser/adduser?id=' + id + '&status=' + JSON.stringify(true)
				})
			}
		},
		onShow() {
			this.machineNum = 1
			this.dynamicPageNum = 1
			this.getMachineList()
			if (this.pitchTab[1].status) {
				this.getAlldynamicList() //全部可见数据 //动态管理
			}

		},

		onReachBottom() {
			if (this.pitchTab[0].status && this.headerTab[0].status) {
				this.getMachineNextList()
			} else if (this.pitchTab[0].status && this.headerTab[1].status) {
				this.getAllUserNextList() //全部用户下一页数据 //用户管理
			}

			if (this.pitchTab[1].status && this.userTab[0].status) {
				this.getAlldynamicNextList() //全部可见下一页数据 //动态管理
			} else if (this.pitchTab[1].status && this.userTab[1].status) {
				this.getConcealNextList() //隐藏动态下一页数据 //动态管理
			}

		}



	}
</script>
<style>
	page {
		background-color: #F4F5F5;
	}
</style>
<style lang="scss" scoped>
	.container {

		// 顶部选项卡
		.roof_tab {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30upx 30upx;
			background-color: #fff;

			.le_title {
				display: flex;
				vertical-align: middle;
				color: rgba(16, 16, 16, 100);
				font-size: 36upx;
				font-weight: 600;

				image {
					width: 50upx;
					height: 50upx;
					margin-right: 4upx;
				}
			}

			.ri_tab {
				display: flex;

				.Item {
					width: 190upx;
					height: 70upx;
					line-height: 70upx;
					border-radius: 100upx;
					background-color: rgba(244, 245, 245, 100);
					color: rgba(0, 0, 0, 0.35);
					font-size: 30upx;
					text-align: center;
					box-shadow: 0px 0px 4upx 0px rgba(244, 245, 245, 100);
					font-family: Arial;
					border: 2upx solid rgba(0, 0, 0, 0.05);
					font-weight: 600;
				}

				.Item:first-child {
					margin-right: 20upx;
				}

				.active {
					background-color: rgba(85, 119, 252, 100);
					color: rgba(255, 255, 255, 100);
					box-shadow: 0px 0px 2px 0px rgba(85, 119, 252, 100);

				}
			}
		}

		//占位
		.placeholder {
			width: 750upx;
			height: 20upx;
			background-color: rgba(244, 245, 245, 100);
		}

		// 用户管理样式区域
		.user_container {
			background-color: #fff;
			height: 100vh;

			// 头部选项卡
			.header_tab {
				display: flex;
				justify-content: center;
				height: 106upx;
				font-size: 30upx;
				padding-top: 40upx;
				box-sizing: border-box;
				color: rgba(0, 0, 0, 0.35);
				border-bottom: 2upx solid rgba(244, 245, 245, 100);

				.Item {
					padding-bottom: 20upx;
				}

				.Item:first-child {
					margin-right: 70upx;
				}

				.active {
					color: rgba(85, 119, 252, 100);
					font-weight: 600;
					border-bottom: 4upx solid rgba(85, 119, 252, 100);
				}
			}

			// 机器用户/全部用户
			.content_box {
				padding: 40upx 30upx;
				background-color: #fff;

				// 机器用户
				.robot_list {
					.head_title {
						width: 690upx;
						height: 100upx;
						line-height: 100upx;
						border-radius: 24upx;
						// background-color: rgba(85, 119, 252, 15);
						color: rgba(85, 119, 252, 100);
						font-size: 30upx;
						text-align: center;
						font-family: Arial;
						border: 2upx solid rgba(85, 119, 252, 100);
					}

					.robot_con {
						padding-top: 10upx;

						.Item {
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 2upx solid rgba(244, 245, 245, 100);
							padding: 30upx 0upx;

							image {
								width: 90upx;
								height: 90upx;
								border-radius: 50%;
							}

							.item1 {
								width: 510upx;

								.name {
									color: rgba(64, 64, 64, 100);
									font-size: 28upx;
									margin-bottom: 2upx;
								}

								.status_box {
									display: flex;
									color: rgba(0, 0, 0, 0.35);
									font-size: 26upx;

									view {
										margin-right: 10upx;
									}
								}
							}

							.compile {
								color: rgba(85, 119, 252, 100);
								font-size: 26upx;
							}
						}
					}
				}

				//全部用户
				.alluser_list {
					.head_box {
						display: flex;
						justify-content: space-between;
						margin-bottom: 10upx;

						.head_title {
							color: rgba(64, 64, 64, 100);
							font-size: 30upx;
							font-weight: 600;
						}

						.headuser_tab {
							display: flex;
							color: rgba(0, 0, 0, 0.35);
							font-size: 13px;

							.active {
								color: rgba(85, 119, 252, 100);
								font-weight: 600;
							}
						}

						.headuser_tab view:first-child {
							margin-right: 20upx;
						}
					}

					.user_con {
						.Item {
							display: flex;
							align-items: center;
							position: relative;
							border-bottom: 2upx solid rgba(244, 245, 245, 100);
							padding: 30upx 0upx;

							image {
								width: 90upx;
								height: 90upx;
								border-radius: 50%;
							}

							.item1 {
								margin: 0upx 16upx;

								.name {
									color: rgba(64, 64, 64, 100);
									font-size: 28upx;
									margin-bottom: 2upx;
								}

								.status_box {
									display: flex;
									color: rgba(0, 0, 0, 0.35);
									font-size: 26upx;

									view {
										margin-right: 10upx;
									}
								}
							}

							.date {
								color: rgba(0, 0, 0, 0.35);
								font-size: 26upx;
								position: absolute;
								right: 0;
							}
						}
					}
				}

			}
		}

		//动态管理样式区域
		.dynamic_container {
			background-color: #F4F5F5;
			height: 100vh;

			.dynamic_content {

				//选项卡样式区域
				.con_header_tab {
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28upx 30upx 20upx 30upx;
					margin-bottom: 20upx;

					.btn_tab {
						display: flex;
						color: rgba(0, 0, 0, 0.35);
						font-size: 30upx;

						view {
							margin-right: 30upx;
						}
					}

					.active {
						color: rgba(85, 119, 252, 100);
						font-weight: 600;
						position: relative;
					}

					.active::before {
						content: "";
						position: absolute;
						bottom: -31upx;
						width: 120upx;
						height: 4upx;
						background-color: rgba(85, 119, 252, 100);
					}

					.new_user {
						width: 100upx;
						height: 60upx;
						line-height: 60upx;
						border-radius: 100upx;
						background-color: rgba(85, 119, 252, 100);
						color: rgba(255, 255, 255, 100);
						font-size: 28upx;
						text-align: center;
						box-shadow: 0px 0px 4upx 0px rgba(85, 119, 252, 100);
						border: 2upx solid rgba(0, 0, 0, 0.05);
					}
				}


			}

			// 动态内容样式区域
			.content_box {
				.box {
					width: 100%;
					background-color: #fff;
					margin-bottom: 20upx;

					.box_one {
						padding: 30upx;
						display: flex;
						align-items: center;

						.headImg {
							width: 80upx;
							height: 80upx;
							border-radius: 50%;
						}

						.user {
							margin: 0upx 20upx;
							width: 440upx;

							.name {
								margin-bottom: 8upx;
								color: rgba(16, 16, 16, 100);
								font-size: 15px;
							}

							.time {
								color: rgba(160, 160, 160, 100);
								font-size: 12px;
							}
						}

						.userstatus {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 134upx;
							height: 56upx;
							border-radius: 100upx;
							background-color: rgba(255, 255, 255, 100);
							color: rgba(64, 64, 64, 100);
							font-size: 26upx;
							border: 2upx solid rgba(64, 64, 64, 100);

							image {
								width: 36upx;
								height: 36upx;
								margin-right: 6upx;

							}
						}

						.recover {
							height: 60upx;
							background-color: rgba(64, 64, 64, 100);
							color: rgba(255, 255, 255, 100);
							border: 2upx solid rgba(0, 0, 0, 0.75);
						}
					}

					.img_content {
						.box_twoImg {
							display: flex;
							flex-wrap: wrap;

							image {
								margin-bottom: 4upx;
							}
						}

						.one {
							width: 750upx;
							height: 750upx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.two {
							justify-content: space-between;

							image {
								width: 374upx;
								height: 374upx;
							}
						}

						.the {
							image {
								width: 248upx;
								height: 248upx;
							}
						}

						.the .image:nth-child(2) {
							margin: 0upx 2upx;
						}

						.the .image:nth-child(5) {
							margin: 0upx 2upx;
						}

						.the .image:nth-child(8) {
							margin: 0upx 2upx;
						}
					}



					.box_threecon {
						padding: 30upx 30upx 10upx 30upx;
						color: rgba(64, 64, 64, 100);
						font-size: 28upx;
					}

					.box_four {
						color: rgba(85, 119, 252, 100);
						font-size: 28upx;
						margin-right: 30upx;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						padding: 0upx 30upx 42upx;

						.place {
							display: flex;
							align-items: center;
							margin-right: 30upx;
							margin-top: 20upx;

							image {
								width: 36upx;
								height: 36upx;
								margin-right: 8upx;
							}

						}

						.tag {
							display: flex;
							flex-wrap: wrap;

							view {
								padding: 8upx 20upx;
								border-radius: 100upx;
								background-color: rgba(255, 255, 255, 100);
								color: rgba(157, 157, 157, 100);
								font-size: 26upx;
								border: 2upx solid rgba(0, 0, 0, 0.15);
								margin-right: 20upx;
								margin-top: 20upx;
							}
						}

					}

					.box_five {
						display: flex;
						padding: 28upx 0upx 28upx 102upx;
						border-top: 2upx solid rgba(238, 238, 238, 100);
						color: rgba(102, 102, 102, 100);
						font-size: 28upx;

						.item {
							display: flex;
							align-items: center;
						}

						.item:nth-child(2) {
							margin: 0upx 156upx 0upx 162upx;
						}

						image {
							width: 44upx;
							height: 44upx;
							margin-right: 20upx;
						}
					}
				}
			}

			//全部可见/选项卡样式区域
			.visible {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30upx 30upx 28upx 30upx;
				background-color: #fff;
				margin: 20upx 0upx;

				.num {
					color: rgba(64, 64, 64, 100);
					font-size: 30upx;
					font-weight: 600;
				}

				.visible_tab {
					display: flex;
					align-items: center;
					color: rgba(0, 0, 0, 0.35);
					font-size: 30upx;

					view:first-child {
						margin-right: 20upx;
					}

					.active {
						color: rgba(85, 119, 252, 100);
						font-weight: 600;
					}
				}

			}

			.num_box {
				padding: 30upx 30upx 28upx 30upx;
				margin: 20upx 0upx;
				background-color: #fff;
				color: rgba(64, 64, 64, 100);
				font-size: 30upx;
				font-weight: 600;
			}
		}
	}
</style>
